<template>
  <input type="number" ref="input" :value="value" @input="updateValue($event.target.value)" @focus="selectAll" @blur="formatValue">
</template>

<script>

import store from '@/assets/js/storehouse';

const input = {
  name: 'input',
  store,
  data(){
    return {
      isShow: false,
      setNum: this.value
    }
  },
  props: {
    value: {
      default: 0
    }
  },
  methods: {
    updateValue(value) {
      let reVal = Math.trunc(value);
      if (isNaN(reVal)) {
        reVal = 4;
        this.isShow = true;
      } else {
        if (reVal < 4 || reVal > 18) {
          reVal = 4;
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      }
      this.$emit('input', reVal);
    },
    selectAll(event) {
      setTimeout(function () {
      	event.target.select()
      }, 0)
    },
    formatValue(){
      this.$refs.input.value = this.value;
      this.isShow ? this.$store.commit('showBlock') : this.$store.commit('showClose')
    }
  },
  mounted(){
    this.formatValue();
  }
};

export default input
</script>
